<style>
    input[name='smscode'] {
        padding-right: 80px;
    }

    .get-smscode-btn {
        position: absolute;
        right: 7px;
        margin-top: -29px;
        color: #ECB039;
    }

    .smscode-left-time {
        position: absolute;
        right: 7px;
        margin-top: -27px;
        color: #ECB039;
    }

    #sendSmsCodeDialog {
        padding: 10px;
    }

    #sendSmsCodeDialog .layui-form-item {
        margin-top: 15px;
    }

    #mobileLoginSwitchPassword,
    #mobileLoginSwitchSmscode {
        float: right;
        color: #b98306;
    }
</style>
<form class="layui-form layui-form-pane" action="/core/enterprise.user/mobileLogin?eid={$enterprise.id}" method="post">
    <div class="layui-form-item">
        <label class="layui-form-label">手机号</label>
        <div class="layui-input-inline">
            <input type="text" name="mobile" id="mobile" placeholder="请输入手机号" required
                   autocomplete="off" value=""
                   class="layui-input" lay-verify="mobile"
                   lay-verType="tips"/>
        </div>
    </div>
    <div class="layui-form-item" id="mobileLoginPasswordArea">
        <label class="layui-form-label">密码</label>
        <div class="layui-input-inline">
            <input type="password" name="password" placeholder="请输入密码"
                   autocomplete="off"
                   class="layui-input"/>
        </div>
    </div>
    <div class="layui-form-item" id="mobileLoginSmscodeArea" style="display: none;">
        <label class="layui-form-label">短信验证码</label>
        <div class="layui-input-inline">
            <input type="text" name="smscode" placeholder="请输入短信验证码"
                   autocomplete="off"
                   class="layui-input"/>
            <a href="javascript:;" class="get-smscode-btn">获取验证码</a>
            <span class="smscode-left-time" style="display: none;"></span>
        </div>
    </div>
    <div class="layui-form-item">
        <a href="javascript:;" id="mobileLoginSwitchPassword" style="display: none;">我要使用密码登录</a>
        <a href="javascript:;" id="mobileLoginSwitchSmscode">我要使用短信验证码登录</a>
    </div>
    <div class="layui-form-item">
        <button class="layui-btn layui-btn-fluid" lay-filter="mobile-login" lay-submit>登 录</button>
    </div>
</form>

<div id="sendSmsCodeDialog" style="display: none;">
    <div class="layui-form-item">
        <label class="layui-form-label">图形验证码</label>
        <div class="layui-input-inline captcha-verify">
            <input type="text" name="code" placeholder="请输入图形验证码" required autocomplete="off"
                   class="layui-input" lay-verify="required" id="mobileCaptchaCode"
                   lay-verType="tips"/>
            <img class="captcha" src="{:captcha_src()}" id="mobileCaptcha"
                 onclick="this.src='{:captcha_src()}?_='+new Date().getTime();"/>
        </div>
    </div>
</div>

<script type="text/javascript">
    layui.use(['form', 'element'], function () {
        var form = layui.form;
        var element = layui.element;
        form.render();

        form.verify({
            mobile: function (value, item) { //value：表单的值、item：表单的DOM对象
                if (!checkMobile(value)) {
                    return '手机号格式错误';
                }
            }
        });

        form.on('submit(mobile-login)', function (data) {
            if (!data.field.password && !data.field.smscode) {
                layer.alert("请输入密码或者短信验证码");
                return false;
            }
            return true; //返回false阻止表单跳转
        });
    });

    var smsCodeLeftCounterIdx = -1;

    /**
     * 发送验证码按钮
     */
    $("#mobileLoginSmscodeArea .get-smscode-btn").click(function () {
        var mobile = $("#mobile").val();
        if (!checkMobile(mobile)) {
            layer.alert("手机号格式错误");
            return;
        }
        $("#mobileCaptcha").click();
        layer.open({
            type: 1
            , title: '发送短信验证码'
            , shade: 0.8
            , id: 'getSmsCodeDialog' //设定一个id，防止重复弹出
            , area: ['420px']
            , btn: ['发送', '取消']
            , btnAlign: 'c'
            , content: $("#sendSmsCodeDialog")
            , yes: function (index, layero) {
                var mobileCaptchaCode = $("#mobileCaptchaCode").val();
                if (!mobileCaptchaCode) {
                    layer.alert("请输入图形验证码");
                    return;
                }
                g.loading();
                $.post("/core/enterprise.sms/sendCode", {
                    mobile: mobile,
                    captchaCode: mobileCaptchaCode
                }, function (ret) {
                    g.loading(false);
                    if (ret.code == 1) {
                        layer.msg(ret.msg);
                        layer.close(index);
                        $("#mobileLoginSmscodeArea .smscode-left-time").text("60s").attr("left", "60").show();
                        $("#mobileLoginSmscodeArea .get-smscode-btn").hide();
                        smsCodeLeftCounterIdx = setInterval(function () {
                            var left = $(".smscode-left-time").attr("left");
                            if (left <= 0) {
                                clearInterval(smsCodeLeftCounterIdx);
                                $("#mobileLoginSmscodeArea .smscode-left-time").hide();
                                $("#mobileLoginSmscodeArea .get-smscode-btn").show().text("重新发送");
                            } else {
                                left = left - 1;
                                $("#mobileLoginSmscodeArea .smscode-left-time").attr("left", left).text(left + "s");
                            }
                        }, 1000);
                    } else {
                        $("#mobileCaptcha").click();
                        layer.alert(ret.msg);
                    }
                }, "json");
            }
        });
    });

    $("#mobileLoginSwitchSmscode").click(function () {
        $("#mobileLoginPasswordArea").hide();
        $("#mobileLoginSmscodeArea").show();
        $("#mobileLoginSwitchSmscode").hide();
        $("#mobileLoginSwitchPassword").show();
    });

    $("#mobileLoginSwitchPassword").click(function () {
        $("#mobileLoginSmscodeArea").hide();
        $("#mobileLoginPasswordArea").show();
        $("#mobileLoginSwitchPassword").hide();
        $("#mobileLoginSwitchSmscode").show();
    });

    /**
     * 检查手机号
     *
     * @param mobile
     * @returns {boolean}
     */
    function checkMobile(mobile) {
        if (!mobile) {
            return false;
        }
        var mobileReg = /^[1][3,4,5,7,8][0-9]{9}$/;
        if (!mobileReg.test(mobile)) {
            return false;
        } else {
            return true;
        }
    }
</script>